<template>
  <a-card :bordered="false">
    <content-header title="授权信息"></content-header>
    <a-spin :spinning="isLoading">
      <div v-if="authorize" class="message">
        <a-alert
          :type="authorize.authStatus ? 'success' : 'error'"
          :message="authorize.message"
          banner
        />
      </div>
      <div v-if="authorize" class="authorize">
        <p class="info-item">
          <span class="label">用户名称：</span>
          <span class="value">{{ authorize.name }}</span>
        </p>
        <p class="info-item">
          <span class="label">联系方式：</span>
          <span class="value">{{ authorize.contact }}</span>
        </p>
        <p class="info-item">
          <span class="label">授权时间：</span>
          <span class="value">{{ authorize.authorizeTime }}</span>
        </p>
        <p class="info-item">
          <span class="label">到期时间：</span>
          <span class="value">{{ authorize.expirationTime }}</span>
        </p>
        <p class="info-item">
          <span class="label">授权文件：</span>
          <span class="value">
            <a-tag
              :color="authorize.licenseStatus ? '' : 'red'"
            >{{ authorize.licenseStatus ? '正常' : '异常' }}</a-tag>
            <!-- <span class="notes">/auth</span> -->
          </span>
        </p>

        <a-divider orientation="left">账户信息</a-divider>
        <p class="info-item">
          <span class="label">UserKey：</span>
          <span class="value">
            <a-tag>{{ authorize.userKey }}</a-tag>
          </span>
        </p>
        <p class="info-item">
          <span class="label">注册时间：</span>
          <span class="value">{{ authorize.registerTime }}</span>
        </p>
        <p class="info-item">
          <span class="label">账户状态：</span>
          <span class="value">
            <a-tag
              :color="authorize.accountStatus ? '' : 'red'"
            >{{ authorize.accountStatus ? '正常' : '禁用' }}</a-tag>
          </span>
        </p>
        <p class="info-item">
          <span class="label">授权域名：</span>
          <span class="value">
            <div v-if="authorize.accountDomains && authorize.accountDomains.length">
              <a-tag v-for="(item, index) in authorize.accountDomains" :key="index">{{ item }}</a-tag>
            </div>
            <div v-else>无</div>
          </span>
        </p>
      </div>
    </a-spin>
  </a-card>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import * as Api from '@/api/cloud/authorize'
import { ContentHeader } from '@/components'

export default {
  components: {
    ContentHeader
  },
  data () {
    return {
      // 加载中
      isLoading: false,
      // 授权信息
      authorize: undefined
    }
  },
  created () {
    // 获取环境信息
    this.$nextTick(() => {
      this.getAuthorizeInfo()
    })
  },
  methods: {

    // 获取授权用户信息
    getAuthorizeInfo () {
      this.isLoading = true
      Api.info()
        .then(result => this.authorize = result.data.authorize)
        .finally(() => this.isLoading = false)
    }

  }
}
</script>
<style lang="less" scoped>
.message {
  margin-bottom: 16px;
}
.authorize {
  padding: 10px 0;
  font-size: 12.6px;
}
.info-item {
  margin-bottom: 15px;
  .label,
  .value {
    display: inline-block;
  }
  .label {
    width: 100px;
    text-align: right;
  }
  .notes {
    margin-left: 5px;
    font-size: 12px;
  }
}
</style>
